import {designPage, reactive} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {$configuration, AutoTable, Ov, PlcDate, PlcInput} from "../../../../packages";
import {useTableOption} from "../../../module/useTableOption";

export const demo_1 = designPage(() => {

  const ov = $configuration.use('ov')!;

  return () => (
    <DemoRow title="格式化">
      <ul>
        <li>{ov.getNameByTypeAndCodeComputed('promotion', 'limit_time_discount')}</li>
        <li>{ov.getNameByTypeAndCodeComputed('promotion', 'luck_draw')}</li>
        <li>{ov.getNameByTypeAndCodeComputed('promotion', 'full_discount')}</li>
        <li>{ov.getNameByTypeAndCodeComputed('acct_type', 'ov_supplier')}</li>
        <li>{ov.getNameByTypeAndCodeComputed('acct_type', 'ov_trade')}</li>
      </ul>
    </DemoRow>
  );
});

export const demo_2 = designPage(() => {

  const state = reactive({
    val: undefined,
  });

  return () => <>
    <DemoRow title="数据绑定">
      <Ov v-model={state.val} ov="promotion" width="200"/>
      <Ov v-model={state.val} ov="promotion" width="200"/>
    </DemoRow>
  </>;
});

export const demo2 = designPage(() => {
  const state = reactive({
    formData: {} as any
  });

  return () => (
    <DemoRow title="多选">
      <Ov width="200" ov="prod_type" multiple v-model={state.formData.ovVal}/>
      {JSON.stringify(state.formData.ovVal)}
    </DemoRow>
  );
});

export const demo3 = designPage(() => {

  const state = reactive({
    val: 'full_discount',
  });

  return () => <>
    <DemoRow title="有初始值">
      <Ov v-model={state.val} ov="promotion" width="200"/>
    </DemoRow>
  </>;
});

export const demo4 = designPage(() => {

  const option = useTableOption({
    url: '/ov',
  });

  return () => <>
    <div style={{ height: '100%', boxSizing: 'border-box', backgroundColor: 'white' }}>
      <AutoTable option={option}>
        <PlcInput title="显示值" field="name"/>
        <PlcInput title="代码" field="code"/>
        <PlcInput title="类型" field="type"/>
        <PlcDate title="创建时间" field="createdAt" hideInForm width={180} editable={false} datetime/>
        <PlcInput title="说明" field="comment"/>
      </AutoTable>
    </div>
  </>;
});
